extends ../common/layout
block content
  section#content
    section.vbox
      section.scrollable.wrapper-lg
        .row
          .col-sm-8
            .panel
              // video player
              #jp_container_1
                .jp-type-single.pos-rlt
                  #jplayer_1.jp-jplayer.jp-video
                  .jp-gui
                    .jp-video-play
                      a.fa.fa-5x.text-white.fa-play-circle
                    .jp-interface.bg-info.padder
                      .jp-controls
                        div
                          a.jp-play
                            i.icon-control-play.i-2x
                          a.jp-pause.hid
                            i.icon-control-pause.i-2x
                        .jp-progress
                          .jp-seek-bar.dker
                            .jp-play-bar.dk
                            .jp-title.text-lt
                              ul
                                li
                        .hidden-xs.hidden-sm.jp-current-time.text-xs.text-muted
                        .hidden-xs.hidden-sm.jp-duration.text-xs.text-muted
                        .hidden-xs.hidden-sm
                          a.jp-mute(title='mute')
                            i.icon-volume-2
                          a.jp-unmute.hid(title='unmute')
                            i.icon-volume-off
                        .hidden-xs.hidden-sm.jp-volume
                          .jp-volume-bar.dk
                            .jp-volume-bar-value.lter
                        div
                          a.jp-full-screen(title='full screen')
                            i.fa.fa-expand
                          a.jp-restore-screen(title='restore screen')
                            i.fa.fa-compress.text-lt
                  //-.jp-no-solution.hide
                    span Update Required
                    |                           To play the media you will need to either update your browser to a recent version or update your
                    a(href='http://get.adobe.com/flashplayer/', target='_blank') Flash plugin
                      | .
              // / video player
              .wrapper-lg
                h2.m-t-none.text-black Big Buck Bunny Trailer
                .post-sum
                  p
                    | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id neque quam. Aliquam sollicitudin venenatis ipsum ac feugiat. Vestibulum ullamcorper sodales nisi nec condimentum. Mauris convallis mauris at pellentesque volutpat.
                    br
                    br
                    |                         Phasellus at ultricies neque, quis malesuada augue. Donec eleifend condimentum nisl eu consectetur. Integer eleifend, nisl venenatis consequat iaculis, lectus arcu malesuada sem, dapibus porta quam lacus eu neque.
                .line.b-b
                .text-muted
                  i.fa.fa-user.icon-muted
                  |  by
                  a.m-r-sm(href='#') Admin
                  i.fa.fa-clock-o.icon-muted
                  |  Feb 20, 2013
                  a.m-l-sm(href='#')
                    i.fa.fa-comment-o.icon-muted
                    |  3 comments
            h4.m-t-lg.m-b 3 Comments
            section.comment-list.block
              article#comment-id-1.comment-item
                a.pull-left.thumb-sm
                  img.img-circle(src='/images/man.jpg')
                section.comment-body.m-b
                  header
                    a(href='#')
                      strong John smith
                    label.label.bg-info.m-l-xs Editor
                    span.text-muted.text-xs.block.m-t-xs
                      | 24 minutes ago
                  .m-t-sm
                    | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id neque quam. Aliquam sollicitudin venenatis ipsum ac feugiat. Vestibulum.
              // .comment-reply
              article#comment-id-2.comment-item.comment-reply
                a.pull-left.thumb-sm
                  img.img-circle(src='/images/man.jpg')
                section.comment-body.m-b
                  header
                    a(href='#')
                      strong John smith
                    label.label.bg-dark.m-l-xs Admin
                    span.text-muted.text-xs.block.m-t-xs
                      | 26 minutes ago
                  .m-t-sm
                    | Lorem ipsum dolor sit amet, consecteter adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet.
              // / .comment-reply
              article#comment-id-2.comment-item
                a.pull-left.thumb-sm
                  img.img-circle(src='/images/a2.png')
                section.comment-body.m-b
                  header
                    a(href='#')
                      strong John smith
                    label.label.bg-dark.m-l-xs Admin
                    span.text-muted.text-xs.block.m-t-xs
                      | 26 minutes ago
                  blockquote.m-t
                    p
                      | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
                    small
                      | Someone famous in
                      cite(title='Source Title') Source Title
                  .m-t-sm
                    | Lorem ipsum dolor sit amet, consecteter adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet.
            h4.m-t-lg.m-b Leave a comment
            form#commentform.comment-form(action='#', method='post', novalidate='')
              if user
                p.logged-in-as
                  | 以
                  a(href='#') #{user.nickName}
                  | 的身份登录。
                  a(href='/logout', title='登出此帐户') 登出？
              else
                p.comment-notes
                  span#email-notes 电子邮件地址不会被公开。
                  |  必填项已用
                  span.required *
                  | 标注
                .form-group.row
                  .col-sm-6
                    label(for='author') Your Name:
                    span.required *
                    input#author.form-control(name='author', type='text', value='', size='30')
                  .col-sm-6
                    label(for='email') Your Email:
                    span.required *
                    input#email.form-control(name='email', type='text', value='', size='30')
              .form-group
                label(for='comment') 评论:
                textarea#comment.form-control(name='comment', cols='45', rows='8', aria-required='true')
              button.btn.btn-success(type='submit') 提交 评论
          .col-sm-4
            .panel.panel-default
              .panel-heading 推荐
              .panel-body
                each i in [1,2,3,4,5,6,0]
                  article.media
                    a.pull-left.thumb-lg.m-t-xs(href='/test/video-detail/1')
                      img(src='/images/m40.jpg')
                    .media-body
                      a.font-semibold(href='#') Bootstrap 3: What you need to know
                      .text-xs.block.m-t-xs
                        a(href='#') Travel
                        |  2 minutes ago
